{*
    This Jet template block renders a switcher using Bootstrap buttons.
    It takes four parameters:
    - baseURL: The base URL for all buttons
    - paths: A slice of URL paths for each button
    - names: A slice of display names/labels for each button
    - activeState: The current active path to highlight the corresponding button

    The template loops through the paths, creating a button for each one.
    Each button is styled using Bootstrap 5 classes, including:
    - btn-secondary for the button style (or btn-danger for r18 paths)
    - rounded-pill for pill-shaped edges
    - fw-bold for bold text

    The template also handles the active state:
    - Adds 'active' class to the button if its path matches the activeState
    - Sets aria-pressed attribute for accessibility
    - Adds an icon (bi-circle-fill) for the active state

    This switcher can be used for tabbed navigation or toggling between different views.

    Tip: For absolute URI paths, start the baseURL with a forward slash.
*}

{{- block Switcher(baseURL, paths, names, activeState) }}
    {{- range i, k := paths }}
        <a href="{{ baseURL }}{{k}}" class="btn {{ len(k) >= 3 && k[len(k) - 3:] == "r18" ? "btn-danger" : "custom-btn-secondary" }} bg-charcoal-surface2 me-2 mb-2 d-flex align-items-center justify-content-center position-relative {{ activeState == k ? "active" : "" }}" aria-pressed="{{ activeState == k ? "true" : "false" }}" role="button">
            {{- if activeState == k }}
                <i class="bi bi-circle-fill start-icon start-0 me-3"></i>
            {{- end }}
            <span>{{ names[i] }}</span>
        </a>
    {{- end }}
{{- end }}
